<template>
    <div class="wel-top-content">
        <div class="left-text-content">
            <span class="title">WELCOME！欢迎来到临床研究数据管理与分析平台</span>
            <div class="news">
                <span>最新消息：2025年3月25日，平台新增关节系统疾病临床医学研究专题库</span>
                <ArrowRightBold style="width: 14px; height: 14px; margin-left: 8px; color: #0648ab" />
            </div>
        </div>
        <div class="right-content">
            <div class="right-have-run" v-for="(item, index) in rightMoudleData" :key="item.id"
                :style="index === 0 ? 'margin-right:20px' : ''">
                <span>{{ item.title }}</span>
                <div class="module-content">
                    <div class="module-value" v-for="(v, i) in item.valueList" :key="i">{{ v }}</div>
                    <div class="module-value" v-if="index === 0">{{ formattedTime }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="welTop">
import { ref, reactive, onMounted } from 'vue';
import { topRight, samplingNotice } from '@/api/top/top';

import { useStore } from 'vuex';
const store = useStore(); // 获取 Vuex store
let rightMoudleData = reactive([
    {
        title: '平台已运行（天）',
        value: 0,
        id: 1,
    },
    {
        title: '研究病例总量',
        value: 0,
        id: 2,
    },
]);
const notification = ref(null);
rightMoudleData.forEach((item, index) => {
    item.valueList = item.value.toString().split('');
});

// 获取当前时间
const getCurrentTime = () => {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0'); // 获取小时并补充0
    const minutes = String(now.getMinutes()).padStart(2, '0'); // 获取分钟并补充0
    const seconds = String(now.getSeconds()).padStart(2, '0'); // 获取秒并补充0

    return `${hours}:${minutes}:${seconds}`;
};
const router = useRouter();
// 使用 ref 存储格式化后的时间
const formattedTime = ref(getCurrentTime());

// 可以设置一个定时器来每秒更新一次时间
const intervalId = setInterval(() => {
    formattedTime.value = getCurrentTime();
}, 1000);

onUnmounted(() => {
    clearInterval(intervalId);
    notification.value && notification.value.close()
});






onMounted(() => {
    topRight().then(res => {
        rightMoudleData[0].value = Number(res.data.data[0]);
        rightMoudleData[1].value = Number(res.data.data[1]);

        rightMoudleData.forEach((item, index) => {
            item.valueList = item.value.toString().split('');
        });
    });


});

</script>
<style scoped lang="scss">
.wel-top-content {
    width: 80%;
    height: 15%;
    display: flex;
}

.left-text-content {
    width: 55%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .title {
        font-size: 32px;
        letter-spacing: 2px;
        margin-bottom: 20px;
        // color: #bdbbbb;
        color: #86879f;
    }

    .news {
        font-size: 18px;
        color: #f8f8f8;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

.right-content {
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    .right-have-run {
        width: auto;
        height: 50%;
        font-size: 22px;
        color: #66ffff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .module-content {
        width: auto;
        min-width: 250px;
        height: 60%;
        margin-top: 20px;
        display: flex;
        align-items: center;
        // justify-content: space-between;
    }

    .module-value {
        width: auto;
        min-width: 30px;
        height: 100%;
        padding: 0 5px;
        padding-bottom: 3px;
        margin-right: 10px;
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('../img/module.png');
        background-size: 100% 100%;
    }
}
</style>
